<template>
    <div class="SerBasicInformation">
        <el-row class="serBasicLine-box">
            <el-col :span="8" class="serBasicName">
                <p>IP 地址</p>
            </el-col>
            <el-col :span="16" class="serBasicData">
                <span class="lableNumber">
                    {{ selectedMonID.selectedIP? selectedMonID.selectedIP : " " }}
                </span>
            </el-col>
        </el-row>
        <el-row class="serBasicLine-box">
            <el-col :span="8" class="serBasicName">
                <p>数据库名</p>
            </el-col>
            <el-col :span="16" class="serBasicData">
                <span class="lableNumber">
                    {{ osData.sid? osData.sid : " " }}
                </span>
            </el-col>
        </el-row>
        <el-row class="serBasicLine-box">
            <el-col :span="8" class="serBasicName">
                <p>数据库版本</p>
            </el-col>
            <el-col :span="16" class="serBasicData">
                <span class="lableNumber">
                    {{ osData.dbVersion? osData.dbVersion : " " }}
                </span>
            </el-col>
        </el-row>
         <el-row class="pintai-box" >
            <el-col :span="8" class="serBasicName">
                <p>错误日志路径</p>
            </el-col>
            <el-col :span="16" class="serBasicData" v-loading="loading" element-loading-text="拼命加载中" element-loading-background="#021033" element-loading-spinner="el-icon-loading">
                <span class="lableNumber" style="font-size:14px;word-wrap:break-word">
                    {{ errLog? errLog : " " }}
                </span>
            </el-col>
        </el-row>
        <!-- <el-row class="serBasicLine-box">
            <el-col :span="8" class="serBasicName">
                <p>启动时间</p>
            </el-col>
            <el-col :span="16" class="serBasicData">
                <span class="lableNumber">
                    {{ osData.DbStartedTime? osData.DbStartedTime : " " }}
                </span>
            </el-col>
        </el-row>
        <el-row class="serBasicLine-box">
            <el-col :span="8" class="serBasicName">
                <p>记录时间</p>
            </el-col>
            <el-col :span="16" class="serBasicData">
                <span class="lableNumber">
                    {{ osData.RecordTime? osData.RecordTime : " " }}
                </span>
            </el-col>
        </el-row> -->
    </div>
</template>

<script>
import { getMysqlInfo,getMysqlErrLog } from '@/api/index.js';
import bus from 'common/bus.js';

export default {
    data() {
        return {
            postData: {
                opera: 'ospanlinfo',
                curPage: 1,
                pageSize: 20,
                sort: {
                    sortColumn: '',
                    sortOrders: ''
                },
                filtersType: 'fuzzyquery',
                filters: {
                    "monid":""
                },
            },
            // ip: '',
            // hostName: '',
            // os: '',
            // cpuNumber: '',
            // physicalMemory: '',
            osData: {},
            selectedMonID: {},
            timerName: 'SerBasicInformation',
            timerEventName: 'timerSerBasicInformation',
            timerInterval: 1000 * 60,
            selectedMonID: {},
            osData: {},
            errLog:'',
            loading:false
        }
    },
    created() {
        bus.$on('selectedMonIDMysql', msg => {
            this.resetData();
            
            this.selectedMonID = msg;
            // this.postData.filters.monid = this.selectedMonID.selectedOSMonID;
            this.getData();
        }); 
        
        bus.$emit('timerNewTodo', {
            name: this.timerName,
            eventName: this.timerEventName,
            interval: this.timerInterval,
            intervalNow: 0
        });

        bus.$on(this.timerEventName, msg => {
            if (msg.isGetData) {
                this.resetData();

                this.getData();
            }
        });
        
    },
    mounted() {

    },
    computed: {
        postDataFn() {
            return {
                postData : JSON.stringify(this.postData)
            }
        }
    },
    methods: {
        getData(){
            
            getMysqlInfo(
                {ip:this.selectedMonID.selectedIP,dbServername:this.selectedMonID.selectedDBNAME}
            ).then((res) => {
                if (res.length > 0) {
                    this.osData = res[0];
                }
            });
            this.loading=true;
            getMysqlErrLog(
                {ip:this.selectedMonID.selectedIP,dbServername:this.selectedMonID.selectedDBNAME}
            ).then((res) => {
               
                if (res) {
                    this.errLog = res
                    this.loading=false
                }

            });
            
        },
        resetData() {
            this.osData = {};
            this.errLog=''
        }
    },
    beforeDestroy() {
        bus.$emit('timerNewTodo', {
            name: this.timerName
        });
         bus.$off('selectedMonIDMysql')
    },
    watch:{
        
    }
}
</script>

<style scoped>
.SerBasicInformation{
    padding: 0px 5px;
    height: calc(100% - 22px - 8px);
    text-align: center;
    color: aliceblue;
}
.SerBasicInformation > .serBasicLine-box {
    height: calc((100% - 30%) / 3);
    border-top: 1px solid rgb(4, 44, 119);
    overflow: hidden;
}
.SerBasicInformation .pintai-box{
    height: 30%;
    border-top: 1px solid rgb(4, 44, 119);
    overflow: hidden;
}
.SerBasicInformation > div > div {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid rgb(4, 44, 119);
}
.SerBasicInformation > div > div:last-child {
    border-right: none;
}

.lableNumber{
    width: auto;
    overflow: hidden;
}
</style>    